<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="box">订单总数：80000</div>
            </el-col>
            <el-col :span="8">
                <div class="box">用户总数：520000</div>
            </el-col>
            <el-col :span="8">
                <div class="box">注册人数：55225000</div>
            </el-col>
        </el-row>

        <el-row style="margin-top:20px;">
            <el-col :span="24">
                <echarts id="pie" :option='Option' width='100%' height="300px" />
            </el-col>
        </el-row>

    </div>
</template>

<script>
import echarts from '@/components/echarts'
export default {
    name:'home',
    components:{
        echarts
    },
    data() {
        return {
            Option:{
                title:{
                    text:'折线图',
                    left:'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }]
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    .content{
        .box{
            @include p(20,60);
            @include radius(5);
            border:1px solid $base-border-color;
        }
    }
</style>

